date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSSCSS : Margins, paddings, borders
Explorons davantage l'utilisation de margins, de paddings et de bordures en CSS. Ces propriétés sont essentielles pour ajuster la mise en page et la présentation des éléments sur une page web.
margin)La propriétés margin est utilisée pour définir l'espace entre les bordures d'un élément et les éléments adjacents. Elle peut être appliquée à tous les côtés d'un élément (haut, droite, bas, gauche) ou à des côtés spécifiques individuellement. Voici comment cela fonctionne :
/* Applique une marge de 20 pixels sur tous les côtés de l'élément */
div {
margin: 20px;
}
/* Applique une marge de 10 pixels en haut, 20 pixels à droite, 30 pixels en bas, 40 pixels à gauche */
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
L'utilisation de marges est courante pour espacer des éléments les uns des autres ou pour créer de l'espace autour d'un élément par rapport à son conteneur. Pour plus d'infos ou des utilisations plus complexes des margins, vous pouvez consulter cette documentation.
padding)La propriété padding est utilisée pour définir l'espace entre le contenu d'un élément et sa bordure. Comme les marges, elle peut être appliquée à tous les côtés ou à des côtés spécifiques. Voici comment l'utiliser :
/* Applique un padding de 15 pixels sur tous les côtés de l'élément */
div {
padding: 15px;
}
/* Applique un padding de 10 pixels en haut, 20 pixels à droite, 30 pixels en bas, 40 pixels à gauche */
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
Le padding est souvent utilisé pour ajouter de l'espace à l'intérieur d'un élément, créant ainsi de l'espace autour du contenu. Pour plus d'infos ou des utilisations plus complexes des paddings, vous pouvez consulter cette documentation.
border)La propriété border est utilisée pour définir la bordure d'un élément. Elle est généralement utilisée en conjonction avec d'autres propriétés pour spécifier la largeur, le style et la couleur de la bordure. Voici comment l'utiliser :
/* Applique une bordure de 1 pixel de large, de style solide (solid), de couleur noire */
div {
border: 1px solid #000;
}
/* Applique une bordure de 2 pixels de large, de style en pointillés (dotted), de couleur rouge uniquement sur le côté gauche */
div {
border-width: 0 0 0 2px;
border-style: dotted;
border-color: red;
}
Les bordures sont couramment utilisées pour encadrer des éléments, créer des boîtes d'informations et ajouter des éléments décoratifs à la mise en page. Pour plus d'infos ou des utilisations plus complexes des borders, vous pouvez consulter cette documentation.
En comprenant comment utiliser marges, paddings et bordures de manière appropriée, vous pouvez créer des mises en page bien espacées et attrayantes pour vos pages web. N'hésitez pas à expérimenter avec ces propriétés pour obtenir les résultats souhaités dans vos projets CSS.
créé le 2023-09-01 à 11:20